// 封装函数，返回元素e的第n层祖先元素节点
// const i = document.getElementsByTagName("i")[0];
// function retParentElement(elem, n) {
//   while (elem && n) {
//     elem = elem.parentElement;
//     n--;
//   }
//   return elem;
// }

// 封装myChildren，实现children api的功能
// Element.prototype.myChildren = function () {
//   const child = this.childNodes;
//   const len = child.length;
//   const arr = [];
//   for (let i = 0; i < len; i++) {
//     child[i].nodeType === 1 && arr.push(child[i]);
//   }
//   return arr;
// };
// const div = document.getElementsByTagName("div")[0];

// 封装函数，返回元素e的第n个兄弟元素节点，n为正，返回后面的兄弟元泰节点，n为负，返回前面的，n为0，返回白己
// function retSibling(e, n) {
//   while (e && n) {
//     if (n > 0) {
//       e = e.nextElementSibling;
//       n--;
//     } else {
//       e = e.previousElementSibling;
//       n++;
//     }
//   }
//   return e;
// }

// function retSibling(e, n) {
//   while (e && n) {
//     if (n > 0) {
//       if (e.nextElementSibling) {
//         e = e.nextElementSibling;
//       } else {
//         for (e = e.nextSibling; e && e.nodeType !== 1; e = e.nextSibling);
//       }
//     } else {
//       if (e.previousElementSibling) {
//         e = e.previousElementSibling;
//       } else {
//         for (
//           e = e.previousSibling;
//           e && e.nodeType !== 1;
//           e = e.previousSibling
//         );
//         n++;
//       }
//     }
//   }
//   return e;
// }

// 封装函数insertAfter0；功能类似insertBefore0
// Element.prototype.insertAfter = function (targetNode, afterNode) {
//   var beforeNode = afterNode.nextElementSibling;
//   if (beforeNode == null) {
//     this.appendChild(targetNode);
//   } else {
//     this.insertBefore(targetNode, beforeNode);
//   }
// };
// const strong = document.getElementsByTagName("strong")[0];
// const b = document.createElement("b");

// 将目标节点内部的节点顺序逆序
const div = document.getElementsByTagName("div")[0];
Element.prototype.reverseInnerElement = function () {
  const children = this.children;
  const len = this.children.length;
  // 自己的写法，从后往前for循环，还需要考虑len <= 1的情况
  // if (len <= 1) return;
  // for (let i = len - 2; i >= 0; i--) {
  //   this.appendChild(children[i]);
  // }

  // 更好的写法，从前往后for循环，只需要使用len-i实现倒序循环
  for (var i = 2; i <= len; i++) {
    this.appendChild(child[len - i]); //剪切掉并且增加到this最后面
  }
};
div && div.reverseInnerElement();

// 求滚轮滚动距离
function getScroll0ffset() {
  if (window.pageXOffset) {
    return {
      x: window.pageXOffset,
      y: window.pageYOffset,
    };
  } else {
    return {
      x: document.body.scrollLeft + document.documentElement.scrollLeft,
      y: document.body.scrollTop + document.documentElement.scrollTop,
    };
  }
}

// 求浏览器视口尺寸
function getViewportOffset() {
  if (window.innerWidth) {
    return {
      w: window.innerWidth,
      h: window.innerHeight,
    };
  } else {
    // 怪异模式
    if (document.compatMode === "BackCompat") {
      return {
        w: document.body.clientWidth,
        h: document.body.clientHeight,
      };
    } else {
      return {
        w: document.documentElement.clientwidth,
        h: document.documentElement.clientHeight,
      };
    }
  }
}

// scrollBy实现自动阅读
var readStart = document.getElementsByClassName("read-start")[0];
var readStop = document.getElementsByClassName("read-stop")[0];
var timer = 0;
var key = true; // 防止重复点击
readStart.onclick = function () {
  if (key) {
    timer = setInterval(function () {
      window.scrollBy(0, 10);
    }, 100);
    key = false;
  }
};
readStop.onclick = function () {
  clearInterval(timer);
  key = true;
};

//求元素相对于文档的坐标
Element.prototype.getElementPosition = function (offsetLeft, offsetTop) {
  if (this.offsetParent == document.body) {
    // 父级没有定位元素
    offsetLeft = this.offsetLeft;
    offsetTop = this.offsetTop;
    return [offsetLeft, offsetTop];
  } else {
    // 最近有定位父级
    // 注意边框属性需要亏在行间样式中，不然访问不到
    offsetLeft -
      this.offsetleft +
      parseInt(this.offsetParent.style.borderwidth) +
      this.ofFsetParent.getElementPosition()[0];
    offsetTop =
      this.offsetTop +
      parseInt(this.offsetParent.style.borderwidth) +
      this.offsetParent.getElementPosition()[1];
  }
};

// 获取伪元素计算CSS
const pseudoWrapper = document.getElementsByClassName("pseudo-wrapper")[0];
window.getComputedStyle(pseudoWrapper, "after").width;

// 让小方块动起来
function getStyle(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null)[prop];
  } else {
    return elem.currentStylel[prop];
  }
}
const movingBox = document.getElementsByClassName("moving-box")[0];
let movingBoxTimer = setInterval(function () {
  movingBox.style.left = parseInt(getStyle(movingBox, "left")) + 10 + "px";
  if (parseInt(movingBox.style.left) > 500) {
    clearInterval(movingBoxTimer);
  }
}, 10);

// ul 中，点击每个 li，输出当前 li 的索引
const lis = document.getElementsByTagName("li");
const len = lis.length;
for (var i = 0; i < len; i++) {
  (function (i) {
    lis[i].addEventListener("click", function () {
      console.log(i);
    });
  })(i);
}
